<template>
  <!-- 全局引入TinyMCE -->

  <el-dialog
    v-model="editDialogVisible"
    title="修改操作员信息"
    width="40%"
    center
    @close="closeDialog(false)"
  >
    <el-form
      ref="validateForm"
      :model="adminForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="adminForm.name"></el-input>
      </el-form-item>
       <el-form-item label="用户名" prop="username">
        <el-input v-model="adminForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="adminForm.password"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input v-model="adminForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="住宅电话" prop="telephone">
        <el-input v-model="adminForm.telephone"></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="address">
        <el-input v-model="adminForm.address"></el-input>
      </el-form-item>
      <el-form-item label="头像" prop="coverImg">
        <el-upload
          class="avatar-uploader"
          action="/api/system/upload/file"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="handleBeforeUpload"
          :headers="headers"
        >
          <img v-if="coverImg" :src="coverImg" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>  </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="adminForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="validateLogin" type="primary">修改</el-button>
        <el-button
          @click="
            () => {
              closeDialog(false);
            }
          "
          >取消</el-button
        >
      </el-form-item>
    </el-form>
   
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs, onMounted } from "vue";
import { ElNotification } from "element-plus";
import { getRequest, putRequest } from "../../../utils/api";

function useLoadFormData(state) {
  getRequest("/system/admin/list/one", { id: state.adminId }).then((res) => {
    if (res && res.code == 200) {
      state.adminForm = res.data;
      state.coverImg = res.data.userFace ;
    } else {
      ElNotification({
        type: "error",
        title: "失败",
        message: "查询失败",
        duration: 2000,
      });
    }

    // state.imageUrl = res.data.coverImg;
    //  editor.value.setHTML(res.data.adminDetail);
  });
}

export default {
  components: {},
  props: {
    editDialogVisible: Boolean,
    adminId: String,
  },
  setup(props, { emit }) {
    const validateForm = ref();
    const rules = {
      name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
      password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    };
    const state = reactive({
      editDialogVisible: props.editDialogVisible,
      coverImg: "",
      adminId: props.adminId,
       headers: { Authorization: window.sessionStorage.getItem("tokenStr") },
      adminForm: {
        name: "",
        phone: "",
        telephone: "",
        username: "",
        address: "",
        userFace: "",
        remark: "",
        enabled: true,
        password: "",
        id: props.adminId,
      },
    });
    const closeDialog = (visible, data) => {
      emit("onEditCloseDialog", visible, data);
    };
    const validateLogin = () => {
      validateForm.value.validate((valid) => {
        putRequest("/system/admin/list/", state.adminForm).then((res) => {
          if (res && res.code == 200) {
            validateForm.value.resetFields();
            emit("onEditCloseDialog", false, res.data);
          } else {
            ElNotification({
              type: "error",
              title: "失败",
              message: res.message,
              duration: 2000,
            });
          }
        });
      });
    };
    //图片上传
    const handleAvatarSuccess = (res) => {
      state.adminForm.userFace = res.data;
      state.coverImg = res.data;
    };

    const handleBeforeUpload = (file) => {
       
      const name = file.name.split(".")[1];
      if (!["jpg", "jpeg", "png"].includes(name)) {
        ElMessage({
          showClose: true,
          message: "请上传jpg,jpeg,png对应的图片文件",
          type: "error",
        });
        return false;
      }

      return true;
    };
    onMounted(() => {
      useLoadFormData(state);
    });
    return {
      ...toRefs(state),
      rules,
      handleAvatarSuccess,handleBeforeUpload,
      //解构adminAdd返回的结果  返回submitAdd对象函数 需要把富文本编辑器也传过去 这里省略了
      validateForm,
      closeDialog,
      validateLogin,
    };
  },
};
</script>

<style>
.el-form-item__error {
  padding-top: 0px;
}
.el-input__inner {
  height: 32px;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 18px;
  color: #8c939d;
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
}
.avatar {
  width: 88px;
  height: 88px;
  display: block;
}
</style>